<template>
	<view class="addsampleorder">
		<view class="close_btn" @click="close">关闭</view>
		<view class="save_btn" @click="save">
			<uni-icons type="plusempty" size="13" color="#fff"></uni-icons>
			保存
		</view>
		<view class="form_list">
			<view class="date_li">
				<view class="circle">单据日期：</view>
				<view class="date">
					<uni-datetime-picker type="date" :value="FDate" @change="change_date" />
				</view>
			</view>
			<view class="date_li">
				<view class="circle">编号：</view>
				<view class="value">{{ FBillNo }}</view>
			</view>

			<view class="date_li">
				<view class="circle">销售范围：</view>
				<picker mode="selector" :range="range_picker_arr" @change="range_picker_change" value="0">
					<view class="choose">{{ FAreaPS }}</view>
				</picker>
			</view>


			<view class="date_li">
				<view class="circle">销售方式：</view>
				<picker mode="selector" :range="purchase_picker_arr" @change="purchase_picker_change" value="0">
					<view class="choose">{{ FSaleStyle }}</view>
				</picker>
			</view>

			<view class="date_li">
				<view class="circle">购货单位：</view>
				<view @click="showDrawer('uniConsumer')" class="choose" :style="{ color: (FCustID ? 'black' : '') }">
					{{ Consumer }}
				</view>
				<drawer v-on:aiguigu="choice('Consumer', null, $event)" ref="uniConsumer" :text="'Consumer'"
					:current="current">
				</drawer>
			</view>

			<!-- <view class="date_li">
				<view class="circle">币别：</view>
				<picker mode="selector" :range="Currency_picker_arr" @change="Currency_picker_change" value="0">
					<view class="choose" :style="{ color: (FCurrencyID ? 'black' : '') }">{{ Currency }}</view>
				</picker>
			</view>

			<view class="date_li">
				<view class="circle">汇率：</view>
				<input placeholder="请输入汇率" v-model="FExchangeRate" />
			</view> -->
		</view>
		<!-- 卡片列表 -->
		<view class="card_list clearfix">
			<uni-card v-for="(item, index) in card_arr" :key="item.current" :title="'序号' + (index + 1)">
				<view class="ul">
					<view class="li">
						<text class="title">物料代码:</text>
						<view class="selector">
							<view @click="showMaterial(index, 'material')" class="choose">{{ item.material_code }}
							</view>
							<drawer v-on:aiguigu="choice('material', index, $event)" ref="uniMaterial"
								:text="'Material'" :current="current"></drawer>
						</view>
					</view>
					<view class="li">
						<text class="title">条形码:</text>
						<input type="number" v-model="item.FSnListID" />
					</view>
					<view class="li">
						<text class="title">物料名称:</text>
						<view class="value">{{ item.material_name || "" }}</view>
					</view>
					<view class="li">
						<text class="title">单位:</text>
						<view class="value">{{ item.measuring || "" }}</view>
					</view>
					<view class="li">
						<text class="title">数量:</text>
						<view class="number_box">
							<!-- 数字选择盒子-->
							<text class="subtract" style="margin-right: 10rpx;" @click="num_subtract(index)">-</text>
							<!-- 减1 -->
							<input class="number" type="number" v-model="item.FQty" />
							<text class="add" style="margin-left: 10rpx;" @click="num_add(index)">+</text> <!-- 加1 -->
						</view>
					</view>
					<view class="li">
						<text class="title">库存数量:</text>
						<view class="value">{{ item.FStockQty || "" }}</view>
					</view>
					<view class="li">
						<text class="title">单价:</text>
						<input type="number" v-model="item.FPrice" />
					</view>
					<view class="li">
						<text class="title">金额:</text>
						<input type="number" v-model="item.FAmount" />
					</view>
					<view class="li">
						<text class="title">交货日期:</text>
						<view class="selector">
							<uni-datetime-picker type="date" :value="item.FDeliveryDate"
								@change="change_dates(index, $event)" />
						</view>
					</view>
				</view>
				<view class="delete" @click="delete_card(item.current)">
					<icon type="clear" size="24" color="#F52713" />
				</view>
			</uni-card>
			<view class="text">制表机构：{{ user_name }}</view>
			<view class="add_btn" @click="add_card">
				<uni-icons type="plusempty" size="13" color="#fff"></uni-icons>
				追加
			</view>
		</view>
	</view>
</template>

<script>
	// 引入uni-ui组件
	import {
		uniDatetimePicker,
		uniIcons,
		uniCard,
	} from '@dcloudio/uni-ui'
	import drawer from "../assembly/drawer.vue";

	export default {
		data() {
			return {
				user_name: "Admin", //用户名
				data_obj: {}, //数据对象（由serial页面传递过来）
				FDate: "", // uni-ui的日期组件的当前日期
				FBillNo: "RIS133547519997", //单据编码
				purchase_picker_arr: ['受托入库', '现购', '赊购'],
				range_picker_arr: ['购销', '调拨'],
				Currency_picker_arr: [],
				FSaleStyle: '请选择销售方式',
				FAreaPS: '请选择销售范围',
				Consumer: '请选择单位',
				Currency: '请选择币别',
				FExchangeRate: 0,
				FCurrencyID: '',
				FCustID: '',

				picker_arr: [],
				// total: '',
				current: 1,
				//卡片列表的数组
				card_arr: [{
					current: 1, //序号
					material_code: "请选择", //物料编码
					FQty: 0, //数量
				}],

			}
		},
		components: {
			drawer,
			uniDatetimePicker, //uni-ui的日期组件
			uniIcons, //uni-ui的icon组件
			uniCard, //uni-ui的icon组件
		},
		mounted() {
			var coding = 'RIV'
			if (!this.detailsid) {
				this.$Api.getCurrency().then(res => {
					this.Currency_picker_arr = res.data.data.arr
					this.Currency_picker_arrs = res.data.data.list
				})
			}

		},
		methods: {
			// 获取当前日期，并且对其进行格式化
			get_nowDate() {
				var now = new Date();
				var year = now.getFullYear(); //得到年份
				var month = now.getMonth() + 1; //得到月份
				var date = now.getDate(); //得到日期
				this.FDate = year + "-" + month + "-" + date;
			},
			// uni-ui日期组件的点击事件
			change_date(event) {
				this.FDate = event; //event为选中的日期
			},
			change_dates(index, event) {
				this.card_arr[index].FDeliveryDate = event; //event为选中的日期
			},
			Currency_picker_change(e) {
				var value = e.detail.value
				this.Currency = this.Currency_picker_arr[value]
				this.FCurrencyID = this.Currency_picker_arrs[value].id
			},
			purchase_picker_change(e) {
				var value = e.detail.value
				this.FSaleStyle = this.purchase_picker_arr[value]
			},
			range_picker_change(e) {
				var value = e.detail.value
				this.FAreaPS = this.range_picker_arr[value]
			},

			showDrawer(text) {
				if (text == 'uniConsumer') {
					this.$refs.uniConsumer.showDrawers();
				}
			},
			// 物料和仓库的抽屉组件的打开事件
			showMaterial(index) {
				this.$refs.uniMaterial[index].showDrawers();
				this.meindex = index
			},
			choice(text, index, data) {
				if (text == 'material') {
					var meindex = this.meindex
					this.card_arr[meindex].material_code = data.FNumber
					this.card_arr[meindex].material_name = data.FName
					this.card_arr[meindex].measuring = data.unit_name
					this.card_arr[meindex].materiel_id = data.id
				} else if (text == 'Consumer') {
					this.Consumer = data.FName
					this.FCustID = data.id
				}
			},
			// 数字选择器盒子点击减的事件
			num_subtract(index) {
				if (this.card_arr[index].FQty == 0) return
				this.card_arr[index].FQty--;
			},
			// 数字选择器盒子点击加的事件
			num_add(index) {
				if (this.card_arr[index].FQty == this.card_arr[index].yuan_nums) return
				this.card_arr[index].FQty++
			},
			// 移除卡片选项点击事件
			delete_card(current) {
				uni.showModal({
					title: "确定删除该选项吗",
					showCancel: true,
					success: (res) => {
						if (res.confirm) {
							this.card_arr.forEach((ele, index) => {
								if (ele.current == current) {
									this.card_arr.splice(index, 1)
								}
							})
						}
					}
				})
			},
			// 添加卡片选项点击事件
			add_card() {
				var current = this.card_arr.length + 1;
				var obj = {
					current: current,
					material_code: "请选择",
					FQty: 0,
				}
				this.card_arr.push(obj)
			},
			// 点击关闭的事件回调
			close() {
				uni.navigateBack({})
			},
			// 点击保存的事件回调
			save() {
				var data_obj = {
					FDate: this.FDate,
					FBillNo: this.FBillNo,
					FAreaPS: this.FAreaPS,
					FSaleStyle: this.FSaleStyle,
					FCustID: this.FCustID,
					FCurrencyID: this.FCurrencyID,
					FExchangeRate: this.FExchangeRate,
					card_arr: this.card_arr, //卡片数组
				}
				if (this.detailsid) {
					data_obj.id = parseInt(this.detailsid)
					data_obj.task = 'update'
				} else {
					data_obj.task = 'add'
				}
				this.$Api.addsample(data_obj).then(res => {
					console.log(res);
					if (res.data.code == 1) {
						uni.showToast({
							title: res.data.msg,
							icon: 'success'
						})
						setTimeout(() => {
							var pages = getCurrentPages();
							var prePage = pages[pages.length - 2]
							prePage.$vm.currentPage = 1
							prePage.$vm.getlist()
							uni.navigateBack({})
						}, 1000)
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'error'
						})
					}
				})
			},
			getdetails(id) {
				//获取编辑详细信息
				console.log(id);
				var id = id
				this.$Api.getsample_details(id).then(res => {
					console.log(res);
					if (res.data.msg == '获取成功') {
						var array = res.data.data
						this.FDate = array.FDate;
						this.FBillNo = array.FBillNo;
						this.FAreaPS = array.FAreaPS
						this.FSaleStyle = array.FSaleStyle
						this.FCustID = array.FCustID
						this.FCurrencyID = array.FCurrencyID
						this.FExchangeRate = array.FExchangeRate
						this.card_arr = array.card_arr
						this.Consumer = array.Consumer
						this.Currency = array.Currency
					}
				})
			}
		},
		onLoad(e) {
			this.get_nowDate()
			if (e.id) {
				this.detailsid = e.id
				this.getdetails(e.id)
			}
		},
	}
</script>

<style lang="less">
	.addsampleorder {
		>.title {
			width: 750rpx;
			margin-left: -10rpx;
			padding-left: 30rpx;
			color: #fff;
			font-size: 28rpx;
			line-height: 2;
			background: #2C3E50;
		}

		>.close_btn,
		>.save_btn {
			display: inline-block;
			padding: 16rpx 20rpx;
			margin: 30rpx 0;
			border-radius: 6rpx;
			font-size: 26rpx;
			color: #fff;
		}

		>.close_btn {
			margin-left: 20rpx;
			background: #444c69;

			&:active {
				background: #2C3E50;
			}
		}

		>.save_btn {
			margin-left: 10rpx;
			background: #18bc9c;

			>.uni-icons {
				//uni-ui的icon图标样式
				margin-right: 5rpx;
				font-weight: bolder;
			}

			&:active {
				background: #128F76;
			}
		}

		>.form_list {
			>view {
				padding: 0 20rpx;
			}

			>.date_li {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 20rpx 0;
				text-align: right;

				>.circle {
					font-size: 28rpx
				}

				>.value {
					height: 68rpx;
					// padding: 0rpx;
					// border: 1px solid #e5e5e5;
					border-radius: 4px;
					line-height: 68rpx;
					font-size: 30rpx;
				}

				.choose {
					padding: 12rpx 0rpx;
					// border: 1px solid #e5e5e5;
					border-radius: 4px;
					font-size: 32rpx;
					color: #888;
					width: 450rpx;
				}
			}

			>.code_li,
			>.customer_li,
			>.contact_li,
			>.phone_li,
			>.serial_li {
				uni-select {
					height: 40px;
				}

				>.value {
					height: 68rpx;
					padding-left: 20rpx;
					border: 1px solid #e5e5e5;
					border-radius: 4px;
					line-height: 68rpx;
					font-size: 30rpx;
				}

				.choose {
					padding: 12rpx;
					padding-left: 20rpx;
					border: 1px solid #e5e5e5;
					border-radius: 4px;
					font-size: 32rpx;
					color: #888;
				}
			}

			>.note_li {
				>input {
					padding: 12rpx;
					padding-left: 20rpx;
					border: 1px solid #e5e5e5;
					border-radius: 4px;
				}
			}

			>.serial_li {
				>.serial_choose {
					padding: 15rpx 0;
					margin-top: 15rpx;
					border: 1px solid #e5e5e5;
					border-radius: 4px;
					background: #18bc9c;
					text-align: center;
					font-size: 28rpx;
					color: #fff;

					&:active {
						background: #128F76;
					}
				}
			}

			>.customer_li {
				.uni-drawer__content {

					//uni-ui抽屉组件
					scroll-view {
						input {
							border: 1px solid #e5e5e5;
							margin: 20rpx;
							padding-left: 20rpx;
						}

						.text {
							text-align: center;
							line-height: 64rpx;
							font-size: 28rpx;

							&:active {
								background-color: #ddd;
							}
						}

						.uni-pagination {
							//uni-ui分页器组件
							margin-top: 40rpx;
						}
					}

				}
			}

		}

		>.card_list {
			padding: 0 10rpx;
			padding-top: 30rpx;

			>.uni-card {
				//uni-ui卡片组件的类名
				margin: 30rpx 10rpx !important;
				position: relative;

				.ul {
					>.li {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 10rpx 0;

						>input {
							text-align: center;
						}

						>.value {
							height: 68rpx;
							width: 68%;
							text-align: center;
							padding-left: 20rpx;
							border: 1px solid #e5e5e5;
							border-radius: 4px;
							line-height: 68rpx;
						}

						>.number_box {
							//数字选择盒子
							// margin-right: 100rpx;
							font-size: 30rpx;
							display: flex;
							width: 72%;
							justify-content: center;

							>text {
								padding: 8rpx 20rpx;
								border: 1px solid #ccc;
								// margin: 0 10rpx;
								background: #F5F5F5;
							}

							>.number {
								width: 166px;
								padding: 8rpx 0;
								border: 1px solid #ccc;
								text-align: center;
							}
						}

						>.selector {
							width: 72%;
							// margin-left: 20rpx;

							// >uni-picker{
							// 	border:1px solid #e5e5e5;
							input {
								border: 1px solid #e5e5e5;
								margin: 20rpx;
								padding-left: 20rpx;
							}

							.choose {
								border: 1px solid #e5e5e5;
								padding: 10rpx 0;
								border-radius: 4px;
								text-align: center;
							}

							// }
						}

						>input {
							// margin-left: 20rpx;
							padding: 12rpx;
							padding-left: 20rpx;
							border: 1px solid #e5e5e5;
							border-radius: 4px;
							width: 66.5%;
							// padding-left: 10px;
						}
					}
				}

				.delete {
					position: absolute;
					top: 8rpx;
					right: 18rpx;
				}
			}

			>.add_btn {
				float: right;
				padding: 16rpx 140rpx;
				border-radius: 6rpx;
				font-size: 26rpx;
				color: #fff;
				background: #18bc9c;

				>.uni-icons {
					//uni-ui的icon图标样式
					margin-right: 5rpx;
					font-weight: bolder;
				}

				&:active {
					background: #128F76;
				}
			}

			>.text {
				float: left;
				margin: 10rpx;
				font-size: 30rpx;
			}
		}
	}
</style>
